<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<h1>事件处理器</h1>
<div id="example-1">
    <h3>监听事件</h3>
    <button v-on:click="counter += 1">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>
    <hr />
    <!-- `greet` 是在下面定义的方法名 -->
    <div class="parent" v-on:click.self="greetParent">
        <button v-on:click.stop="greet">Greet</button>
        <div class="child-1">
            <p>I am a child level-1.</p>
            <button type="submit" v-on:click.once="greet$event('this is $event shows', $event)">Greet $event</button>
        </div>
    </div>

    <h3>按键修饰符</h3>
    <p>只有在 keyCode 是 13 时调用 vm.submit()</p>
    <input v-on:keyup.enter="submitInput">
    <p>组合按键: Alt + C </p>
    <input type="text" @keyup.alt.67="clear('clear somthing', $event)">
    <p>组合按键: Ctrl + Click </p>
    <div type="text" @click.ctrl="ctrlClick('ctrlClick', $event)">ctrlClick</div>
</div>

<script src="./lib/vue.js"></script>
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>

<script>
    var example1 = new Vue({
        el: '#example-1',
        data: {
            counter: 0,
            name: 'jiangxtx',
        },
        methods: {
            greetParent: function (event) {
                console.log('greetParent: ', event.target.classList)
            },
            greet: function (event) {
                console.log('greet Hello ' + this.name, event && event.target && event.target.tagName)
            },
            greet$event: function (msg, event) {
                console.log('greet$event: ', msg, event)
            },
            submitInput: function (event) {
                const value = event.target.value;
                if (value) {
                    alert('submitInput: ' + value)
                }
            },
            clear: function (msg, event) {
                alert('ready to clear this Input...')
                event.target.value = '';
            },
            ctrlClick : function (msg, event) {
                alert('ctrlClick...' + msg)
            }
        }
    })
</script>

</body>
</html>